/* 学员信息页面思路分析
1.默认加载学员信息列表 
2.添加学员 ：bootstrap模态框
3.省市县三级联动
4.确认添加 : 发送ajax请求
5.重置添加弹窗
6.删除学员信息
7.修改学员信息

本页面三个难点
难点1 ： 省市县三级联动 逻辑复杂
难点2 ： 表单较多，需要单独封装函数获取参数
难点3 ： 新增和编辑复用一个模态框， 一个按钮实现两种业务
    新增 ： (1)获取表单数据 (2)发送新增ajax请求
    编辑 ： (1)将点击的当前数据渲染到表单上 (2)获取表单数据 (3)发送编辑ajax请求
*/
function fn() {
    axios({
        url: '/student/list',
        method: 'get'
    }).then(res => {
        //成功回调
        console.log(res)
        render(res.data.data)
    })
}
fn()
const render = arr => {
    document.querySelector('tbody').innerHTML = arr.map(item =>
        `
        <tr>
        <th scope="row">${item.id}</th>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.sex}</td>
        <td>${item.group}</td>
        <td>${item.phone}</td>
        <td>${item.salary}</td>
        <td>${item.truesalary}</td>
        <td>${item.province + item.city + item.county}</td>
        <td>
          <button type="button" data-id="${item.id}" class=" update btn btn-primary btn-sm">修改</button>
          <button type="button" data-id="${item.id}" class=" delete btn btn-danger btn-sm">删除</button>
        </td>
      </tr>
        `
    ).join('')
}

//新增学员
document.querySelector('.btnAddStu').addEventListener('click', function () {
    document.querySelector('.addModalLabel').innerHTML = '添加新学员'
    document.querySelector('.btnAddStudent').innerHTML = '确认添加'
    //弹出模态框 显示:show 隐藏:hide
    $('#addModal').modal('show')
    getProvince()
})

/* 模态框省市县三级联动 ，省市县必须“依次”选择
(a)什么时候加就省数据 ：模态框显示的时候
(2)什么时候加载市数据：省下拉莱单change事件
(3)什么时候加就县数据 ： 市下拉莱单change事件 */

function getProvince() {
    axios({
        url: '/geo/province',
        method: 'get'
    }).then(res => {
        //成功回调
        console.log(res)
        document.querySelector('[name="province"]').innerHTML = '<option value="">--省--</option>' +
            res.data.map(item => `
    <option value="${item}">${item}</option>
    `).join('')
    })
}

document.querySelector('[name=province]').addEventListener('change', function () {
    document.querySelector('[name="county"]').innerHTML = '<option value="">--区--</option>'
    document.querySelector('[name="city"]').innerHTML = '<option value="">--市--</option>'
    axios({
        url: '/geo/city',
        method: 'get',
        params: { pname: this.value }
    }).then(res => {
        //成功回调
        console.log(res)
        document.querySelector('[name="city"]').innerHTML = '<option value="">--市--</option>' +
            res.data.map(item => `
        <option value="${item}">${item}</option>
        `).join('')
    })
})
document.querySelector('[name=city]').addEventListener('change', function () {
    document.querySelector('[name="county"]').innerHTML = '<option value="">--区--</option>'
    axios({
        url: '/geo/county',
        method: 'get',
        params: {
            pname: document.querySelector('[name=province]').value,
            cname: this.value
        }
    }).then(res => {
        //成功回调
        console.log(res)
        document.querySelector('[name="county"]').innerHTML = '<option value="">--区--</option>' +
            res.data.map(item => `
        <option value="${item}">${item}</option>
        `).join('')
    })
})


//新增
document.querySelector('.btnAddStudent').addEventListener('click', function (e) {
    //阻止表单的默认跳转
    e.preventDefault()
    //1.收集数据: 10个数据
    /* 
    FormData对象有两种工作模式(表单name属性一般要与后面接口参数一致)
    手动挡: 自己手动添加参数
         a.创建fd : const fd = new FormData()
         b.手动添加参数: fd.append('参数名',参数值)

    自动挡: 自动获取表单参数(获取form中所有的表单元素的name与value,存入fd中)
         const fd = new FormData(form表单)
    */
    const fd = new FormData(document.querySelector('form'))
    //formdata是用于上传文件的,如果接口没有文件则需要吧formdata转成普通的对象object
    let obj = {}
    fd.forEach((item, index) => {
        obj[index] = item
    })
    //2.校验数据:非空
    if (Object.values(obj).some(item => item === '')) {
        return Toast.fail('输入框不能为空')
    }
    let config = {}
    if (document.querySelector('.btnAddStudent').innerText === '确认添加') {
        config = {
            url: '/student/add',
            method: 'post',
            data: obj,
        }
    } else {
        config = {
            url: '/student/update',
            method: 'put',
            data: {
                ...obj,
                id: this.dataset.id
            }
        }
    }
    //3.发送数据
    axios(config).then(res => {
        //成功回调
        console.log(res)
        //4.处理数据: 成功:刷新列表
        if (res.data.code === 0) {
            //刷新列表
            getProvince()
            //弹窗消失
            $('#addModal').modal('hide')
            fn()
        }
    }).catch(err => {
        Toast.fail(err.response.data.message)
    })

})

/*3.修改学员:不复用模态框思路
(1)html文件中：新增模态框html，复制粘贴生成编辑模态框
(2)点击修改按钮：弹出 编辑模态框 */

//3.1事件委托 修改按钮
document.querySelector('tbody').addEventListener('click', function (e) {
    if (e.target.classList.contains('update')) {
        //修改文本
        document.querySelector('.addModalLabel').innerHTML = '修改学员'
        document.querySelector('.btnAddStudent').innerHTML = '确认修改'
        document.querySelector('.btnAddStudent').dataset.id = e.target.dataset.id
        //弹出模态框
        $('#addModal').modal('show')
        getProvince()
        axios({
            url: '/student/one',
            method: 'get',
            params: { id: e.target.dataset.id }
        }).then(res => {
            //成功回调
            console.log(res)
            document.querySelector('[name="name"]').value = res.data.data.name
            document.querySelector('[name="age"]').value = res.data.data.age
            document.querySelector('[name="group"]').value = res.data.data.group
            const nan = document.querySelectorAll('[name="sex"]')[0]
            const nv = document.querySelectorAll('[name="sex"]')[1]
            res.data.data.sex === '男' ? nan.checked = true : nv.checked = true
            document.querySelector('[name="phone"]').value = res.data.data.phone
            document.querySelector('[name="salary"]').value = res.data.data.salary
            document.querySelector('[name="truesalary"]').value = res.data.data.truesalary
            document.querySelector('[name="province"]').value = res.data.data.province
            //省-开始就有数据option，所以可以直接设置value来送中option
            //市和县一开始没有数据option，所以不能直接设置value, 需要自己加option
            document.querySelector('[name="city"]').innerHTML = `<option>${res.data.data.city}<option>`
            document.querySelector('[name="county"]').innerHTML = `<option>${res.data.data.county}<option>`
        })
    } else if (e.target.classList.contains('delete')) {
        axios({
            url: '/student/delete',
            method: 'delete',
            params: { id: e.target.dataset.id }
        }).then(res => {
            //成功回调
            console.log(res)
            fn()
        })
    }
})
